<template>
	<view class="horizontal-tabs">
		<scroll-view scroll-x class="tab-scroll" show-scrollbar="false">
			<view class="tab-list">
				<view v-for="(item, index) in items" :key="index" 
				:class="['tab-item', modelValue === index ? 'active' : '', index === items.length - 1 ? 'last' : '']" 
				@click="() => {
				    $emit('update:modelValue', index)
				    $emit('tab-click', item.id)
				  }">
					{{ item.label }}
				</view>
			</view>
		</scroll-view>

<!-- 		<view class="tab-content">
			<slot />
		</view> -->
	</view>
</template>


<script setup>
	defineProps({
		items: {
			type: Array,
			required: true
		},
		modelValue: {
			type: Number,
			default: 0
		}
	})

	defineEmits(['update:modelValue', 'tab-click'])
</script>


<style lang="scss" scoped>
	.horizontal-tabs {
		display: flex;
		flex-direction: column;
		height: 100%;
		position: relative;

		/* 横向滚动容器 */
		.tab-scroll {
			white-space: nowrap;
			overflow-x: scroll;
			// padding: 20rpx 0;
			background-color: #fff;

			/* 选项卡列表 */
			.tab-list {
				display: flex;
				flex-direction: row;

				/* 高亮当前项 */
				.tab-item.active {
					background-color: #4cd964;
					color: #fff;
				}

				/* 单个选项卡 */
				.tab-item {
					// width: 220rpx; // 固定宽度
					max-width: 360rpx;
					margin: 0 auto;
					width: 100%;
					padding: 16rpx 20rpx;
					font-size: 26rpx;
					border-radius: 10rpx;
					background-color: #f0f0f0;
					color: #666;
					text-align: center;
					// flex-shrink: 0; // 防止被压缩 这里被注释
					transition: background-color 0.3s, color 0.3s;

					/* 最后一个额外右边距 */
					&:last-child {
						margin-right: 30rpx;
					}

				}
			}

		}

	}



	// /* 内容区域 */
	// .tab-content {
	// 	flex: 1;
	// 	padding: 10rpx;
	// 	overflow: auto;
	// 	font-size: 28rpx;
	// }

	/* 渐变遮罩提示可滑动 */
	.scroll-mask {
		position: absolute;
		right: 0;
		top: 0;
		width: 60rpx;
		height: 100rpx;
		background: linear-gradient(to left, #fff, transparent);
		pointer-events: none;
	}
</style>